<template>
  <div class="customer-table-container">
    <div class="search-bar">
      <label for="nickname">客户昵称</label>
      <input
        type="text"
        id="nickname"
        v-model="searchParams.nickname"
        placeholder="请输入"
      />
      <label for="phone">客户手机号</label>
      <input
        type="text"
        id="phone"
        v-model="searchParams.phone"
        placeholder="请输入"
      />
      <button class="reset-btn" @click="resetSearch">重置</button>
      <button class="search-btn" @click="search">搜索</button>
    </div>
    <table class="customer-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>客户昵称</th>
          <th>客户手机号</th>
          <th>是否签约</th>
          <th>服务下单次数（次）</th>
          <th>绑定老人姓名</th>
          <th>首次登录时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in displayedData" :key="index">
          <td>{{ item.index }}</td>
          <td>{{ item.nickname || '——' }}</td>
          <td>{{ item.phone || '——' }}</td>
          <td>{{ item.isSigned || '否' }}</td>
          <td>{{ item.orderCount || 0 }}</td>
          <td>{{ item.elderlyNames || '——' }}</td>
          <td>{{ item.firstLoginTime || '——' }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <span>共 {{ total }} 项数据</span>
      <select v-model="pageSize">
        <option value="10">10条/页</option>
        <option value="20">20条/页</option>
        <option value="50">50条/页</option>
      </select>
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }}</span>
      <button
        @click="nextPage"
        :disabled="currentPage === totalPages"
      >下一页</button>
      <input
        type="number"
        v-model.number="jumpPage"
        placeholder="跳至"
        min="1"
        max="totalPages"
      />
      <span>/{{ totalPages }}页</span>
      <button @click="jumpToPage">跳转</button>
    </div>
  </div>
</template>

<script>
import { listCustomerInfo } from "@/api/le/member";

export default {
  data() {
    return {
      searchParams: {
        nickname: '',
        phone: '',
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
      jumpPage: 1,
      loading: false,
      // 实际数据从接口获取
      allData: []
      /*// 模拟数据，实际应从接口获取
      allData: [
        {
          index: 1,
          nickname: '范闲',
          phone: '13899999999',
          isSigned: '否',
          orderCount: 4,
          oldPeopleNames: '——',
          firstLoginTime: '2048-10-10 15:00:00',
        },
        {
          index: 2,
          nickname: '范思哲',
          phone: '13788995678',
          isSigned: '否',
          orderCount: 5,
          oldPeopleNames: '高启强、安欣、陈泰',
          firstLoginTime: '2048-10-09 15:00:00',
        },
        {
          index: 3,
          nickname: '范若若',
          phone: '13567678543',
          isSigned: '是',
          orderCount: 5,
          oldPeopleNames: '陈泰、高启盛、',
          firstLoginTime: '2048-10-08 15:00:00',
        },
        {
          index: 4,
          nickname: '范建',
          phone: '13788995678',
          isSigned: '是',
          orderCount: 0,
          oldPeopleNames: '李有田、高启强、陈泰',
          firstLoginTime: '2048-10-07 15:00:00',
        },
        {
          index: 5,
          nickname: '沈重',
          phone: '13567678543',
          isSigned: '是',
          orderCount: 1,
          oldPeopleNames: '安长林、高启强、陈泰',
          firstLoginTime: '2048-10-06 15:00:00',
        },
        {
          index: 6,
          nickname: '二皇子',
          phone: '13788995678',
          isSigned: '是',
          orderCount: 2,
          oldPeopleNames: '徐江、高启强、陈泰',
          firstLoginTime: '2048-10-05 15:00:00',
        },
        {
          index: 7,
          nickname: '陈萍萍',
          phone: '13567678543',
          isSigned: '是',
          orderCount: 3,
          oldPeopleNames: '唐小龙、高启强、陈泰',
          firstLoginTime: '2048-10-04 15:00:00',
        },
        {
          index: 8,
          nickname: '林婉儿',
          phone: '13788995678',
          isSigned: '是',
          orderCount: 4,
          oldPeopleNames: '唐小虎、高启强、陈泰',
          firstLoginTime: '2048-10-03 15:00:00',
        },
        {
          index: 9,
          nickname: '肖恩',
          phone: '13567678543',
          isSigned: '是',
          orderCount: 4,
          oldPeopleNames: '陈书婷、高启强、陈泰',
          firstLoginTime: '2048-10-02 15:00:00',
        },
        {
          index: 10,
          nickname: '海棠朵朵',
          phone: '13566788888',
          isSigned: '是',
          orderCount: 4,
          oldPeopleNames: '杨健、高启强、陈泰',
          firstLoginTime: '2048-10-01 15:00:00',
        },
      ],*/
    };
  },
  created() {
    // 页面加载时获取数据
    this.getList();
  },
  watch: {
    // 监听pageSize变化，重新获取数据
    pageSize() {
      this.currentPage = 1;
      this.getList();
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    },
    displayedData() {
      // 数据已经通过接口分页获取，直接返回
      return this.allData.map((item, index) => ({
        ...item,
        index: (this.currentPage - 1) * this.pageSize + index + 1
      }));
    },
  },
  methods: {
    // 获取客户信息列表
    getList() {
      this.loading = true;
      const queryParams = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        nickname: this.searchParams.nickname || undefined,
        phone: this.searchParams.phone || undefined
      };
      listCustomerInfo(queryParams).then(response => {
        this.allData = response.rows || [];
        this.total = response.total || 0;
        this.loading = false;
      }).catch(error => {
        console.error('获取客户信息失败:', error);
        this.loading = false;
      });
    },
    resetSearch() {
      this.searchParams = {
        nickname: '',
        phone: '',
      };
      this.currentPage = 1;
      this.getList();
    },
    search() {
      this.currentPage = 1;
      this.getList();
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.getList();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.getList();
      }
    },
    jumpToPage() {
      if (
        this.jumpPage >= 1 &&
        this.jumpPage <= this.totalPages &&
        this.jumpPage !== this.currentPage
      ) {
        this.currentPage = this.jumpPage;
        this.getList();
      }
    },
  },
};
</script>

<style scoped>
.customer-table-container {
  width: 100%;
  padding: 20px;
}
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.search-bar label {
  margin-right: 8px;
}
.search-bar input {
  margin-right: 16px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.reset-btn,
.search-btn {
  padding: 8px 16px;
  margin-right: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.search-btn {
  background-color: #0066cc;
  color: #fff;
  border-color: #0066cc;
}
.customer-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.customer-table th,
.customer-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
.customer-table th {
  background-color: #f0f0f0;
}
.pagination {
  display: flex;
  align-items: center;
}
.pagination span,
.pagination select,
.pagination input,
.pagination button {
  margin-right: 8px;
}
.pagination button {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.pagination input {
  width: 50px;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>